<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <c:if test="${empty admin}">
        <%--非法访问--%>
        <c:redirect url="${APP_PATH}/adminLogin"/>
    </c:if>
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
</head>
<body>

<jsp:include page="${APP_PATH}/common/admin/head-area.jsp"/>

<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-3 p-4 bg-white rounded">
        <h5 class="border-bottom border-gray pb-2 mb-0"><i class="fa fa-graduation-cap"></i>已添加领域&nbsp;&nbsp;&nbsp;<a href="${APP_PATH}/adminAddArea" class="btn btn-sm btn-outline-info">添加新领域</a></h5>
        <div id="areaList">
        </div>
    </div>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    //跳转到指定id的领域页面，查看
    function viewArea(ele) {
        //页面跳转
        window.location.href='/adminViewArea/'+$(ele).attr("data-id");
    }

    //获取所有的领域
    $(function () {
        $.ajax({
            url: "/allArea",
            method: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    if (result.extend.areas.length > 0) {
                        var $areaList = $("#areaList");
                        $.each(result.extend.areas, function (index, item) {
                            var $div_media = $("<div style='cursor:hand;' class='media text-muted pt-3'>");
                            var $img = $("<img src='"+item.imgurl+"' style='object-fit: cover' ta-holder-rendered='true' width='40px' height='40px'>");
                            var $p = $("<p data-id='"+item.id+"' onclick='viewArea(this)' class='media-body ml-3 pb-3 mb-0 small lh-125 border-bottom border-gray'>");
                            var $strong = $("<strong class='d-block text-gray-dark'>"+item.areaname+"</strong>");
                            $div_media.append($img).append($p.append($strong).append(item.description)).appendTo($areaList);
                        })
                    } else {
                        toastr.info("当前没有任何领域，请添加！！");
                    }
                } else {
                    //获取信息失败
                    toastr.error("获取领域失败，请重新登录！！");
                }
            }
        });
    });
</script>

</body>

</html>
